<template>
    <div>
        <!-- 搜索 -->
        <div class="search-info">
            <Search @searchChange="searchList" />
        </div>
        <BasicTable
            :columns="columns"
            :height="120"
            :table-data="tableData"
            :row-config="rowConfig"
            :table-loading="tableLoading"
            :page-info="pageInfo"
            @onChangePage="(pageInfo: any) => searchList(FormData, pageInfo)"
        >
            <template #approveStatus="{ row }">
                <div v-if="[2, 3, 4, 5, 6, 7, 10].includes(+row.approveStatus)" class="flex-box align-center">
                    <div class="dot" :class="'dot-' + row.approveStatus"></div>
                    <div>{{ ApprovalStatus[row.approveStatus] }}</div>
                </div>
            </template>
            <template #planPlayTimeBegin="scope">{{
                scope.row.planPlayTimeBegin ? formatDate2(scope.row.planPlayTimeBegin, 'YYYY-MM-DD HH:mm:ss') : '-'
            }}</template>
            <template #planPlayTimeEnd="scope">{{
                scope.row.planPlayTimeEnd ? formatDate2(scope.row.planPlayTimeEnd, 'YYYY-MM-DD HH:mm:ss') : '-'
            }}</template>
        </BasicTable>

        <!-- 抽屉 -->
        <el-drawer v-if="drawer" v-model="drawer" :title="drawerTitle" direction="rtl" custom-class="customer-drawer">
            <Preview
                v-if="drawerType === '0'"
                :audit-id="auditId"
                :approve-sign-id="approveSignId"
                :apply-id="applyId"
            />
            <Collection v-if="drawerType === '1'" :detail-info="detailInfo" />
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import BasicTable from '@/components/BasicTable.vue';
import Preview from './components/preview.vue';
import Collection from './components/collection.vue';
import Search from './components/search.vue';

import { TableData, FormData } from './ModelDefines';
import { ApprovalStatus } from '@/utils/config';
import { getSignApprovalList } from '@/api/delivery/customerManage';
import { formatDate2 } from '@x-tech/fe-utils/dist/date';

const router = useRouter();
const store = useStore();
const auditId = ref('');
const approveSignId = ref('');
const applyId = ref('');
const detailInfo = ref({});
const groupCode = computed(() => store.state.userGroup.userInfo?.groupCode);

const drawer = ref(false);
const drawerTitle = ref('');
const drawerWidth = ref('730px');
const drawerType = ref('');

const tableLoading = ref(false);
const tableData = ref<TableData[]>([]);
const pageInfo = reactive({
    pageNum: 1,
    total: 0,
    pageSize: 10,
});

const showDrawer = (w: string, t: string, s: string) => {
    drawerWidth.value = w;
    drawerTitle.value = t;
    drawerType.value = s;
    drawer.value = true;
};
const columns = [
    { label: '投放主体', key: 'company', prop: { minWidth: '240px', fixed: 'left' } },
    { label: '签约编码', key: 'applyCode', prop: { minWidth: '240px', fixed: 'left' } },
    { label: '签约类型', key: 'signTypeName', prop: { minWidth: '150px' } },
    { label: '签约主体', key: 'signCompanyName', prop: { minWidth: '240px' } },
    { label: '客户类型', key: 'companyPropertyName', prop: { minWidth: '180px' } },
    { label: '客户行业', key: 'industryName', prop: { minWidth: '180px' } },
    { label: '品牌名称', key: 'brandName', prop: { minWidth: '180px' } },
    { label: '审批进度', key: 'approveStatus', prop: { minWidth: '180px' }, render: true },
    { label: '销售姓名', key: 'salesName', prop: { minWidth: '150px' } },
    { label: '预计投放开始时间', key: 'planPlayTimeBegin', prop: { minWidth: '220px' }, render: true },
    { label: '预计投放结束时间', key: 'planPlayTimeEnd', prop: { minWidth: '220px' }, render: true },
];
const rowConfig = [
    {
        color: '#4D88FF',
        name: '查看',
        on: ({ row }: { row: any }) => {
            showDrawer('1150px', '签约信息', '0');
            auditId.value = row.auditId;
            approveSignId.value = row.archiveApplyId ?? '';
            applyId.value = row.applyId ?? '';
        },
    },
    {
        color: '#4D88FF',
        name: '新建方案',
        isPermission: ({ row }: { row: any }) => [6].includes(+row.approveStatus),
        on: ({ row }: { row: any }) => {
            router.push({ path: '/delivery/program/create', query: { applyCode: row.applyCode } });
        },
    },
    {
        name: '回款',
        isPermission: (data: any) => [6].includes(+data.row.approveStatus),
        on: ({ row }: { row: any }) => {
            showDrawer('750px', row.company, '1');
            detailInfo.value = row;
        },
    },
];

const searchList = async (formData: any, pageObj: any) => {
    // 表单重置的时候 分页设置为1
    pageInfo.pageNum = pageObj?.pageNum ? pageObj?.pageNum : pageInfo.pageNum;
    pageInfo.pageSize = pageObj?.pageSize ? pageObj?.pageSize : pageInfo.pageSize;
    const copyData = JSON.parse(JSON.stringify(formData));
    if (copyData.signTypes && copyData.signTypes.includes('all')) {
        copyData.signTypes = [
            'dic-business-opportunity-type-001',
            'dic-business-opportunity-type-003',
            'dic-business-opportunity-type-004',
            'dic-business-opportunity-type-005',
            'dic-business-opportunity-type-006',
        ];
    }
    const params = Object.assign(copyData, {
        pageNum: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
        joinTraderCode: groupCode.value,
    });
    tableLoading.value = true;
    try {
        const data = await getSignApprovalList(params);
        tableData.value = data ? data.list : [];
        pageInfo.total = data ? data.total : 0;
    } finally {
        tableLoading.value = false;
    }
};

onMounted(async () => {
    searchList(FormData, {});
});
</script>

<style lang="scss" scoped>
.flex-box {
    display: flex;
}
.flex {
    flex: 1;
}
.align-center {
    align-items: center;
}
.search-info {
    // min-width: 1200px;
}
// :deep(.large .el-input__inner) {
//     width: 580px;
// }
::v-deep(.form-input .el-input__prefix-inner) {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    &.dot-6 {
        background-color: #22ac4e;
    }
    &.dot-2,
    &.dot-5 {
        background-color: #ffb414;
    }
    &.dot-3,
    &.dot-7 {
        background-color: #e60044;
    }
}

::v-deep(.customer-drawer) {
    width: v-bind(drawerWidth) !important;
    .el-drawer__header {
        .el-drawer__title {
            color: #333;
            font-size: 24px;
            font-weight: 700;
            font-family: 'PingFang SC';
        }
    }
    .el-drawer__body {
        padding: 20px 24px 0 24px;
    }
}
</style>
